import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { visualizer } from "rollup-plugin-visualizer";
// 生产环境开启gzip插件
import viteCompression from "vite-plugin-compression";

export default defineConfig({
  plugins: [
    react(),
    visualizer({
      filename: "stats.html",
      open: true, // 自动打开浏览器
      gzipSize: true, // 查看gzip体积  (开发环境默认开启gzip压缩，生产环境默认不开启，如果需要开启需要自己去配置)
      brotliSize: true, // Brotli 是比 gzip 更高效的压缩算法  (开发环境默认开启Brotli压缩，生产环境默认不开启，如果需要开启需要自己去配置)
      // template: 'treemap',  // 默认为 treemap  sunburst(旭日图)
    }),
    // 生产环境开启gzip压缩
    viteCompression({
      // 生产环境才开启压缩
      disable: false,
      // 压缩后是否删除原文件
      deleteOriginFile: false,
      // 压缩算法
      algorithm: "gzip",
      // 压缩后缀名
      ext: ".gz",
      // 压缩阈值，大于此值才会被压缩，单位 byte
      threshold: 10240,
      // 压缩级别 1-9，越大压缩率越高但越慢
      level: 8,
      // 是否在控制台输出压缩结果
      verbose: true,
    }),
  ],
  base: "./", // 修改资源基础路径(这个必须要配置，不然打包出来的资源路径会出问题)
  server: {
    port: 3000, // 端口号
    host: "0.0.0.0", // 监听所有地址(设置成这个会有local和Network地址)
    strictPort: true,
  },
  build: {
    // 默认打包出口为dist文件夹
    outDir: "build",
    // 静态资源文件夹名称 (默认就是assets)
    assetsDir: "assets",
    // 打包前清空目录  (默认就是true)
    emptyOutDir: true,
    rollupOptions: {
      // external: [
      //   'echarts',  // 排除 echarts
      //   'lodash',   // 排除 lodash
      //   // 其他需要排除的大体积包
      // ],
      output: {
        // globals: {
        //   'echarts': 'echarts',
        //   'lodash': '_'
        // },
        // 使用更明确的分包配置   (注意点：external和manualChunks不能同时使用)
        manualChunks: {
          // 基础框架包（必需）
          "vendor-base": ["react", "react-dom", "react-router-dom"],
          // UI组件包（常用）
          "vendor-ui": ["antd", "@ant-design/icons"],
          // 图表相关（按需加载）
          "vendor-charts": ["echarts"],
          // 工具库（常用）
          "vendor-utils": ["lodash", "axios", "dayjs"],
        },
        assetFileNames: (assetInfo) => {
          const info = assetInfo.name.split(".");
          let extType = info[info.length - 1];
          if (
            /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/i.test(assetInfo.name)
          ) {
            extType = "media";
          } else if (
            /\.(png|jpe?g|gif|svg|bmp|webp)(\?.*)?$/i.test(assetInfo.name)
          ) {
            extType = "img";
          } else if (/\.(woff2?|eot|ttf|otf)(\?.*)?$/i.test(assetInfo.name)) {
            extType = "fonts";
          }
          return `assets/${extType}/[name]-[hash][extname]`;
        },
        chunkFileNames: "assets/js/[name]-[hash].js",
        entryFileNames: "assets/js/[name]-[hash].js",
      },
    },
  },
  esbuild: {
    pure: ["console.log"], // 移除console.log
    drop: ["debugger"], // 移除debugger
  },
  // 5. 环境变量配置
  define: {
    "process.env": {
      // eslint-disable-next-line no-undef
      MODE: process.env.MODE,
    },
  },
});
